<template>
	<div>
		<!-- 导航栏 -->
		<van-nav-bar title="个人中心" v-show="isLogin === true">
			<template #right>
				<van-popover theme="dark" placement="bottom-end" v-model:show="showPopover" :actions="actions"
					@select="handleSelect">
					<template #reference>
						<van-icon name="bars" size="25" />
					</template>
				</van-popover>
			</template>
		</van-nav-bar>
		<!-- 主内容 -->
		<div style="position: absolute; height: 90%; width: 100%; background-color: #00FFFF;">
			<!-- 未登录 -->
			<div v-show="isLogin === false">
				<div style="display: flex; flex-direction: column; align-items: center; margin-top: 150px;">
					<van-icon size="50" name="contact" />
					<div style="margin-top: 20px;">
						<van-button plain round type="primary" icon="phone" @click="$router.push('/login')">手机号登录</van-button>
						<van-button plain round type="success" icon="wechat" @click="weixinLogin()">微信登录</van-button>
					</div>
				</div>
			</div>
			<!-- 已登录 -->
			<div v-show="isLogin === true">
				<div style="display: flex;">
					<van-image round width="5rem" height="5rem" fit="cover" src=""
						style="padding: 5px;" />
					<p style="display: flex; align-items: center; font-size: 25px;">{{ handleName }}</p>
				</div>
				<van-grid style="margin-top: 10px;">
					<van-grid-item icon="star" text="我的收藏" @click="onMyCollect(user.id)" />
					<van-grid-item icon="manager" text="我的信息" @click="onMyInfo()" />
					<van-grid-item icon="question" text="问题反馈" to="/user/question" />
					<van-grid-item icon="info" text="关于本站" @click="onAbout()" />
				</van-grid>
			</div>
		</div>
		<!-- 修改密码 -->
		<van-dialog v-model:show="editPasswordShow" title="修改密码" show-cancel-button @confirm="savePassword">
			<van-form>
				<van-field v-model="passwordForm.oldPassword" label="旧密码" placeholder="请输入旧密码" />
				<van-field v-model="passwordForm.newPassword" type="password" label="新密码" placeholder="请输入新密码" />
				<van-field v-model="passwordForm.confirmNewPassword" type="password" label="确认密码"
					placeholder="请确认新密码" />
			</van-form>
		</van-dialog>
		<my-tabbar :active="tabbarName"></my-tabbar>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tabbarName: "personal", //底部导航栏名称
				isLogin: false, //是否登录标识
				user: {},
				showPopover: false, //是否展示气泡弹出层
				actions: [{
						text: '修改密码'
					},
					{
						text: '退出登录'
					}
				],
				editPasswordShow: false, //修改密码标识
				passwordForm: {
					id: 0,
					oldPassword: "",
					newPassword: "",
					confirmNewPassword: ""
				}
			}
		},
		mounted() {
			let user = this.$cookies.get('user')
			if (user != null) {
				this.isLogin = true
				this.user = user
				this.passwordForm.id = user.id
			}
		},
		computed: {
			//处理头像旁边的名称
			handleName() {
				if (this.user.nickname != '' && this.user.nickname != null) {
					return this.user.nickname
				}
				return this.user.phone
			}
		},
		methods: {
			//右上角气泡弹出框
			handleSelect(action, index) {
				if (index == 0) {
					this.editPasswordShow = true
				}
				if (index == 1) {
					this.handleLogOut()
				}
			},
			//微信登录
			weixinLogin() {
				console.log("微信登录")
				this.$notify({
					type: "primary",
					message: "尚未接入微信"
				})
			},
			//提交修改密码
			savePassword() {
				let _this = this
				if (_this.passwordForm.newPassword === _this.passwordForm.confirmNewPassword) {
					_this.$axios({
						method: 'put',
						url: '/user/updatePassword',
						data: {
							id: _this.passwordForm.id,
							oldPassword: _this.$rsaEncrypt(_this.passwordForm.oldPassword),
							newPassword: _this.$rsaEncrypt(_this.passwordForm.newPassword)
						}
					}).then((resp) => {
						if (resp.code == 200) {
							_this.$notify({
								type: "success",
								message: resp.msg
							})
						}
					})
				} else {
					_this.$notify({
						type: "warning",
						message: "输入的新密码与确认密码不一致，请重新确认"
					})
				}
			},
			//收藏按钮
			onMyCollect(id) {
				this.$router.push({
					path: "/user/collection",
					query: {
						userId: id
					}
				})
			},
			//我的信息按钮
			onMyInfo() {
				this.$router.push({
					path: "/user/myInfo",
					query: {
						id: this.user.id,
					}
				})
			},
			//关于本站
			onAbout() {
				this.$dialog({
					title: '关于本站',
					message: '没事，我就弹个窗',
				})
			},
			//退出登录
			handleLogOut() {
				let _this = this
				_this.$axios({
					method: 'post',
					url: '/user/logout',
					data: {
						id: _this.user.id
					}
				}).then((resp) => {
					if (resp.code == 200) {
						_this.$notify({
							type: 'success',
							message: '退出成功'
						})
						_this.$cookies.remove("user")
						_this.isLogin = false
					}
				})
			}
		}
	}
</script>

<style scoped>
</style>
